<div class="message-block">
    <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.MESSAGE' | translate }}</div>
    <button mat-stroked-button class="add-message-button" (click)="createNewMessage()"
        matTooltip="{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.CREATE_NEW_MESSAGE' | translate }}"
        [matTooltipPosition]="'before'">
        <mat-icon>add</mat-icon>
    </button>
    <mat-form-field>
        <mat-select (selectionChange)="onMessageChange()" [(ngModel)]="selectedMessage">
            <mat-option></mat-option>
            <mat-option *ngFor="let message of messages" [value]="message">
                {{ message.name }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="selectedMessage">
        <div class="adf-property-label">{{ 'PROCESS_EDITOR.ELEMENT_PROPERTIES.MESSAGE_NAME' | translate }}</div>
        <input matInput (change)="onMessageChange()" [(ngModel)]="selectedMessage.name" />
    </mat-form-field>

    <ama-message-variable-mapping
        *ngIf="selectedMessage && isCatchEvent()"
        [message]="selectedMessage"
        [property]="property">
    </ama-message-variable-mapping>
</div>
